<template>
  <div class="_wz_hiddenTroubleAdd">
    <Card>
      <p slot="title">隐患排查</p>
      <div style="margin:0 0 10px;" class="_wz_ztList_cont">
        <div style="display: inline-block;">
          档案编号：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskCheckNumber ? riskListDetailEntityList.riskCheckNumber : '--'}}</span>
          <Divider type="vertical" />
        </div>
        <div style="display: inline-block;">
          运输企业：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.deptName ? riskListDetailEntityList.deptName : '--'}}</span>
          <Divider type="vertical" />
        </div>
        <div style="display: inline-block;">
          风险名称：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskPointName ? riskListDetailEntityList.riskPointName : '--'}}</span>
          <Divider type="vertical" />
        </div>
        <div style="display: inline-block;">
          排查类型：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskPointTypeName ? riskListDetailEntityList.riskPointTypeName : '--'}}</span>
          <Divider type="vertical" />
        </div>
        <div style="display: inline-block;" v-if="!!riskListDetailEntityList">
          排查周期：
          <span class="_wz_ztList_cont_span" v-if="riskListDetailEntityList.riskCheckCycle == 0">不限</span>
          <span class="_wz_ztList_cont_span" v-if="riskListDetailEntityList.riskCheckCycle == 1">每天</span>
          <span class="_wz_ztList_cont_span" v-if="riskListDetailEntityList.riskCheckCycle == 2">每周</span>
          <span class="_wz_ztList_cont_span" v-if="riskListDetailEntityList.riskCheckCycle == 3">每旬</span>
          <span class="_wz_ztList_cont_span" v-if="riskListDetailEntityList.riskCheckCycle == 4">每月</span>
          <span class="_wz_ztList_cont_span" v-if="riskListDetailEntityList.riskCheckCycle == 5">每季</span>
          <Divider type="vertical" />
        </div>
        <div style="display: inline-block;">
          排查日期：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskCheckDate ? riskListDetailEntityList.riskCheckDate : '--'}}</span>
          <Divider type="vertical" />
        </div>
        <div style="display: inline-block;">
          排查阶段：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskCheckPhase ? riskListDetailEntityList.riskCheckPhase : '--'}}</span>
          <Divider type="vertical" />
        </div>
        <div style="display: inline-block;">
          风险状态：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskCheckState ? "有风险" : '无风险'}}</span>
          <Divider type="vertical" />
        </div>
        <template v-if="!!riskListDetailEntityList.riskCheckState">
          <div style="display: inline-block;">
            风险处理：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskHandleState ? "已整改" : '未整改'}}</span>
            <Divider type="vertical" />
          </div>
          <div style="display: inline-block;">
            风险数量：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskCheckCount ? riskListDetailEntityList.riskCheckCount : 0}}</span>
            <Divider type="vertical" />
          </div>
          <div style="display: inline-block;">
            整改数量：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskHandleCount ? riskListDetailEntityList.riskHandleCount : 0}}</span>
          </div>
        </template>
        <div>
          处理意见：<span class="_wz_ztList_cont_span">{{!!riskListDetailEntityList.riskHandleProposal ? riskListDetailEntityList.riskHandleProposal : '--'}}</span>
        </div>
        <div>
          <div style="display: inline-block;">
            检查照片：
            <div class="demo-upload-list">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!riskListDetailEntityList.riskCheckImg?apiUrl.imgUrl + riskListDetailEntityList.riskCheckImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </div>
          <div style="display: inline-block;">
            签字照片：
            <div class="demo-upload-list">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!riskListDetailEntityList.riskCheckSignImg?apiUrl.imgUrl + riskListDetailEntityList.riskCheckSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </div>
        </div>
      </div>
    </Card>

    <Card style="margin: 10px 0 0 0;" v-if="!!riskListDetailEntityList.id">
      <p slot="title">排查清单</p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Drawer title="隐患排查" v-model="riskType" width="800" :mask-closable="false" :draggable="true">
      <div v-if="riskType">
        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <div style="margin:0 0 10px;" class="_wz_ztList_cont">
            <div style="display: inline-block;">
              风险项目：<span class="_wz_ztList_cont_span">{{!!formData.riskItemCheckName ? formData.riskItemCheckName : '--'}}</span>
              <Divider type="vertical" />
            </div>
            <div style="display: inline-block;">
              风险内容：<span class="_wz_ztList_cont_span">{{!!formData.riskItemCheckContent ? formData.riskItemCheckContent : '--'}}</span>
            </div>
            <div>
              <div style="display: inline-block;" v-if="!!formData">
                风险等级：
                <span class="_wz_ztList_cont_span" v-if="formData.riskItemGrade == 1">低风险</span>
                <span class="_wz_ztList_cont_span" v-if="formData.riskItemGrade == 2">一般风险</span>
                <span class="_wz_ztList_cont_span" v-if="formData.riskItemGrade == 3">较大风险</span>
                <span class="_wz_ztList_cont_span" v-if="formData.riskItemGrade == 4">重大风险</span>
                <Divider type="vertical" />
              </div>
              <!--            <div style="display: inline-block;">-->
              <!--              管控措施：<span class="_wz_ztList_cont_span">{{!!formData.riskItemControl ? formData.riskItemControl : '&#45;&#45;'}}</span>-->
              <!--              <Divider type="vertical" />-->
              <!--            </div>-->
              <!--            <div style="display: inline-block;">-->
              <!--              失控表现：<span class="_wz_ztList_cont_span">{{!!formData.riskItemOutControl ? formData.riskItemOutControl : '&#45;&#45;'}}</span>-->
              <!--              <Divider type="vertical" />-->
              <!--            </div>-->
              <div style="display: inline-block;">排查人员：<span class="_wz_ztList_cont_span">{{!!formData.riskCheckPerson ? formData.riskCheckPerson : '--'}}</span>
              </div>
            </div>
          </div>
        </Card>
        <Card dis-hover :bordered="true" style="margin:0 0 10px;height: 100%;">
          <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate1" class="_wz_hiddenTroubleAdd_form">
            <FormItem label="责任人员" prop="riskCheckPerson">
              <i-input v-model="formData.riskCheckPerson" placeholder="请填写责任人员" clearable />
            </FormItem>
            <FormItem label="责任部门" prop="riskCheckDept">
              <i-input v-model="formData.riskCheckDept" placeholder="请填写责任部门" clearable />
            </FormItem>
            <FormItem label="排查时间" prop="wzRiskItemWhenDate">
              <DatePicker type="datetime" placeholder="请选择排查时间" style="width: 100%;" split-panels v-model="formData.wzRiskItemWhenDate"></DatePicker>
            </FormItem>
            <FormItem label="是否隐患">
              <i-switch v-model="formData.riskItemCheckState" size="large" :true-value="Number(1)" :false-value="Number(0)">
                <span slot="open">不合格</span>
                <span slot="close">合格</span>
              </i-switch>
            </FormItem>
            <FormItem label="问题描述" prop="riskDescribe" v-if="formData.riskItemCheckState">
              <i-input v-model="formData.riskDescribe" placeholder="请填写问题描述" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
            </FormItem>
            <Row>
              <i-col span="12">
                <FormItem label="检查照片">
                  <Upload :before-upload="riskCheckFileFun" action="" style="color: #2d8cf0;cursor: pointer;">上传检查照片
                  </Upload>
                  <div class="demo-upload-list">
                    <viewer style="width: 100%;height: 100%;">
                      <img :src="!!riskCheckFile.url?riskCheckFile.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                    </viewer>
                  </div>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="签字照片">
                  <Upload :before-upload="riskCheckSignFileFun" action="" style="color: #2d8cf0;cursor: pointer;">上传签字照片
                  </Upload>
                  <div class="demo-upload-list">
                    <viewer style="width: 100%;height: 100%;">
                      <img :src="!!riskCheckSignFile.url?riskCheckSignFile.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                    </viewer>
                  </div>
                </FormItem>
              </i-col>
            </Row>
          </Form>
        </Card>

        <div class="demo-drawer-footer" style="z-index: 99;">
          <Button style="margin-right: 8px" @click="riskType = false">取消</Button>
          <Button type="primary" @click="riskAddSubmit('formAdd')">提交</Button>
        </div>

      </div>
    </Drawer>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
  import wzTbale from "../../../components/table/table";
  export default {
    components: {
      wzTbale,//列表
    },
    props: ['selectData'],//接收来自父组件的数据
    data() {
      return {

        uploadProgress: 0,//文件上传进度
        riskListDetailEntityList: {},
        riskCheckPhaseList:[],
        spinShow:false,//本页加载
        riskType: false,//弹框
        ruleValidate1: {//正则
          riskCheckPerson: [
            {required: true, message: '请填写责任人员', trigger: 'blur'}
          ],
          riskCheckDept: [
            {required: true, message: '请填写责任部门', trigger: 'blur'}
          ],
          wzRiskItemWhenDate: [
            {type:'date',required: true, message: '请选择排查时间', trigger: 'blur'}
          ],
          riskDescribe: [
            {required: true, message: '请填写问题描述', trigger: 'blur'}
          ],
        },
        riskCheckFile: {
          data: null,
          url: ''
        },
        riskCheckSignFile: {
          data: null,
          url: ''
        },
        formData: {},
        tableData: {
          url: this.apiUrl.webApi + "/safety/risk/riskCheckDetailList",//请求地址
          method: 'post',//请求方式
          where: {checkUuid:this.selectData.uuid},//搜索条件
          height: 'auto',//表格高度 auto
          page: false,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '风险项目', width: 160, key: 'riskItemCheckName'},
            {title: '风险内容', minWidth: 120, key: 'riskItemCheckContent'},
            {
              title: '风险等级', key: 'riskItemGrade', width: 140, render: (h, params) => {
                //（1：低风险，2：一般风险，3：较大风险:，4：重大风险） riskItemGrade;
                var color = '', test = '';
                if (params.row.riskItemGrade == 1) {
                  color = 'primary', test = '低风险';
                } else if (params.row.riskItemGrade == 2) {
                  color = 'success', test = '一般风险';
                } else if (params.row.riskItemGrade == 3) {
                  color = 'warning', test = '较大风险';
                } else {
                  color = 'error', test = '重大风险';
                }
                return h('Tag', {
                  props: {
                    type: 'dot',
                    color: color
                  }
                }, test);
              }
            },
            // {title: '管控措施', minWidth: 180, key: 'riskItemControl'},
            // {title: '失控表现', minWidth: 180, key: 'riskItemOutControl'},
            // {title: '责任部门', minWidth: 140, key: 'riskCheckDept'},
            // {title: '责任人员', minWidth: 120, key: 'riskCheckPerson'},
            {
              title: '排查结果', fixed: 'right', width: 130, render: (h, params) => {
                params.row.riskItemCheckState = !!params.row.riskItemCheckState ? params.row.riskItemCheckState : 0;
                var color = '', test = '';
                if (params.row.riskItemCheckState == 1) {
                  color = 'warning', test = '不合格';
                } else if (params.row.riskItemCheckState == 0) {
                  color = 'success', test = '合格';
                }
                return h('Tag', {
                  props: {
                    type: 'dot',
                    color: color
                  }
                }, test);
              },
            },
            // {title: '问题描述', minWidth: 160, key: 'riskDescribe'},
            {
              title: '操作', fixed: 'right', width: 100,
              render: (h, params) => {
                let operationList = h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      var data = JSON.parse(JSON.stringify(params.row));
                      data.riskItemCheckState = !!data.riskItemCheckState?data.riskItemCheckState:0;
                      data.wzRiskItemWhenDate = !!data.riskItemWhenDate? new Date(data.riskItemWhenDate) : new Date();
                      this.formData = data;
                      this.riskCheckFile = {
                        data: null,
                        url: !!this.formData.riskCheckImg ? this.apiUrl.imgUrl + this.formData.riskCheckImg : ''
                      };
                      this.riskCheckSignFile = {
                        data: null,
                        url: !!this.formData.riskCheckSignImg ? this.apiUrl.imgUrl + this.formData.riskCheckSignImg : ''
                      };
                      this.riskType = true;
                    }
                  }
                }, "排查");
                return operationList;
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
          },
        },
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      that.axios.post(that.apiUrl.webApi + '/safety/risk/riskCheckInfo' ,{uuid:that.selectData.uuid} ).then(res => {
        if (!!res) {
          that.riskListDetailEntityList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })

    },
    methods: {//执行的方法
      riskCheckFileFun(file) {//营业执照图片
        let that = this;
        let type = file.type.split("/")[0];
        if (type == "image") {//图片
          that.riskCheckFile.url = window.URL.createObjectURL(file);
          that.riskCheckFile.data = file;
        } else {
          that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      riskCheckSignFileFun(file) {//营业执照图片
        let that = this;
        let type = file.type.split("/")[0];
        if (type == "image") {//图片
          that.riskCheckSignFile.url = window.URL.createObjectURL(file);
          that.riskCheckSignFile.data = file;
        } else {
          that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      //提交检查项表单
      riskAddSubmit(data) {
        let that = this;
        that.$refs[data].validate((valid) => {
          if (valid) {//正则判断使用

            //排查时间
            !!that.formData.wzRiskItemWhenDate ? that.formData.riskItemWhenDate = that.public.timeFormatting(that.formData.wzRiskItemWhenDate, "yyyy-MM-dd hh:mm:ss") : '';

            var data = JSON.parse(JSON.stringify(that.formData));
            let formData = new FormData();
            for (let key in data) {
              if (!!data[key]) {
                formData.append(key, data[key]);
              }
            }
            //检查照片
            if (!!that.riskCheckFile.data) {//选择了图片
              formData.append('riskCheckFile', that.riskCheckFile.data);
            }
            //签字照片
            if (!!that.riskCheckSignFile.data) {//选择了图片
              formData.append('riskCheckSignFile', that.riskCheckSignFile.data);
            }


            that.axios.post(that.apiUrl.webApi + "/safety/risk/riskCheckDetailSaveOrUpdate", formData, that.public.parameterUploadProgress(that)).then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.$Message.success('保存成功');
                that.$refs.wzTbale.tableLoadData(true);
                that.riskType = false;
                that.$emit("closeFun", true)
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            that.$Message.error('请正确填写表单');
          }
        })
      },

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_hiddenTroubleAdd {
    .ivu-card-body {
      height: calc(100% - 51px);
    }
    .demo-upload-list {
      width: 120px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  ._wz_hiddenTroubleAdd_form{
    .demo-upload-list {
      width: 120px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  ._wz_ztList_cont {
    letter-spacing: 1px;
    line-height: 30px;

    ._wz_ztList_cont_span {
      margin: 0 10px 0 0;
      color: #01AAED;
      word-break: break-all;
    }
  }
</style>
